import { SchemaManage } from '@/components/SchemaComponent';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { DesignModelAPI } from '../common/type';
import { DesignManageContext, getDesignTableColumns } from '../mconfig';
import { PlusOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { UpdateTableModal } from './UpdateTableModal';
import { getKeyRouter } from '@/utils';
import { PublishActivetiModal } from './PublishActivitiModal';

export const ManageRightTableView: React.FC<DesignModelAPI.IManageTableView> = ({ searchRenderID }) => {
  const designManageTableRef: any = React.useRef();

  /**
   * 获取上下文
   */
  const {
    rightTableProps: { dataSource, loading, getDesignTableData, mapList, pagination, otherParams, searchList },
    leftSelectKeys,
    curRes,
    dicFlowSelectRow,
    typeSelectRow,
  } = useContext(DesignManageContext);

  /**
   * 表格默认 参数
   */
  const tableParams = useMemo(() => {
    const dicFlowIdList = dicFlowSelectRow?.id ? dicFlowSelectRow?.id?.split('_') : '';
    return {
      orderType: typeSelectRow?.orderType,
      // businessCategory: dicFlowSelectRow?.id ? dicFlowSelectRow?.id : '',
      businessCategory: dicFlowSelectRow?.id ? dicFlowIdList?.[1] : '',
      // category: typeSelectRow?.id,
      category: dicFlowSelectRow?.id ? dicFlowIdList?.[0] : typeSelectRow?.id,
    };
  }, [dicFlowSelectRow, typeSelectRow]);

  useEffect(() => {
    if (leftSelectKeys && leftSelectKeys?.length > 0) {
      let tablePayload = {
        ...otherParams,
        ...tableParams,
      };
      getDesignTableData({ ...tablePayload });
    }
  }, [leftSelectKeys]);

  /**
   * 是否打开新增流程弹框
   */
  const [updateTableModal, setUpdateTableModal] = useState<any>({
    isShowModal: false,
    checkRowObj: {},
  });

  /**
   *  是否打开发布弹框
   */
  const [publishModal, setPublishModal] = useState<any>({
    isShowModal: false,
    checkRowObj: {},
  });

  /* 切换方法 */
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    if (key) {
      getDesignTableData({ ...params, ...searchValues });
    }
  };

  /**
   * 重置搜索表单方法
   */
  const onReset = (values: any) => {
    getDesignTableData({ ...tableParams, ...values });
  };

  /**
   * 搜索列表
   */
  const onSearch = (request: DesignModelAPI.IGridRequestType) => {
    getDesignTableData({ ...otherParams, ...request });
  };

  /**
   * 分页change 方法
   */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getDesignTableData({ ...otherParams, pageSize, current, ...params });
  };

  /**
   * 表格操作按钮点击方法
   */
  const onOptClick: DesignModelAPI.IOperationClick = {
    onEdit: (resObj: Record<string, any>) => {
      setUpdateTableModal({
        isShowModal: true,
        checkRowObj: resObj,
      });
    },
    onRelease: (resObj: Record<string, any>) => {
      setPublishModal({
        isShowModal: true,
        checkRowObj: resObj,
      });
    },
    onProcess: (resObj: Record<string, any>) => {
      history.push({
        pathname: `/activitiController/modelDesign/{modelId}/:${getKeyRouter()}${getKeyRouter()}`,
        state: {
          modelId: resObj?.id,
        },
      });
    },
  };

  /**
   * 获取columns方法
   */
  const columns: Record<string, any>[] = React.useMemo(() => {
    return getDesignTableColumns(curRes, onOptClick);
  }, [curRes]);

  /** 管理页面头部操作集合 */
  const tableActionList: DesignModelAPI.IHeaderActionType = useMemo(() => {
    return [
      {
        title: '添加',
        visible: (curRes?.['/activitiController/modelAdd'] && dicFlowSelectRow && dicFlowSelectRow?.id) ?? false,
        type: 'primary',
        icon: <PlusOutlined />,
        onClick: () => {
          setUpdateTableModal({
            isShowModal: true,
            checkRowObj: {},
          });
        },
      },
    ];
  }, [curRes, dicFlowSelectRow]);

  return (
    <>
      <SchemaManage
        ref={designManageTableRef}
        searchProps={{
          switchList: [], //头部切换列表
          searchList, //搜索表单列表
          onReset, //重置
          onSwitch, //头部切换
          onSearch, //搜索方法
        }}
        actionList={tableActionList} //Table头部操作按钮列表
        tableProps={{
          // table 表格属性
          columns,
          dataSource,
          loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange, //分页change方法
        }}
        searchDrawerRender={searchRenderID}
      />

      {/* 新增流程数据 */}
      {updateTableModal?.isShowModal && (
        <UpdateTableModal
          visible={updateTableModal?.isShowModal}
          onClose={() => {
            setUpdateTableModal({
              isShowModal: false,
              checkRowObj: {},
            });
          }}
          checkRowObj={updateTableModal?.checkRowObj}
        />
      )}

      {/* 发布弹框 */}
      {publishModal?.isShowModal && (
        <PublishActivetiModal
          visible={publishModal?.isShowModal}
          onClose={() => {
            setPublishModal({
              isShowModal: false,
              checkRowObj: {},
            });
          }}
          checkRowObj={publishModal?.checkRowObj}
        />
      )}
    </>
  );
};
